<template>
  <a-drawer v-model:open="open"
           width="100%"
           :footer="null"
           title="新增跟踪记录"
           :keyboard="false"
           :mask-closable="false"
            @close="handleClose"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="vertical"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '100%' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="8">
          <a-form-item required>
            <template #label>
              <span class="fw">跟踪记录日期</span>
            </template>
            <a-date-picker class="w100" v-model:value="formState.genZongRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  placeholder="请选择"/>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="8">
          <a-form-item>
            <template #label>
               <div class="flex flex-wrap" >
                 <span class="fw">下次处理日期</span>
                 <span class="green ml20 pointer" @click="handleAddDay(7,'d')">+7天</span>
                 <span class="green ml20 pointer" @click="handleAddDay(1,'m')">+1月</span>
                 <span class="green ml20 pointer" @click="handleAddDay(3,'m')">+3月</span>
               </div>
            </template>
            <a-date-picker class="w100" v-model:value="formState.chuLiRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  placeholder="请选择"/>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="8">
          <a-form-item required>
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">船员状态</span>
              </div>
            </template>
            <a-radio-group v-model:value="formState.zhuangTai">
              <a-radio :value="1">待派</a-radio>
              <a-radio :value="2">在船</a-radio>
              <a-radio :value="3">在家</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <a-form-item>
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">记录内容</span>
              </div>
            </template>
            <a-textarea placeholder="请填写" rows="8"  v-model:value="formState.neiRong"></a-textarea>
            <div class="mt10"><span class="fw">快捷短语：</span><a-checkable-tag
                v-for="(tag) in tagsData"
                :key="tag"
                @change="handleChange(tag)"
            >
              {{ tag }}
            </a-checkable-tag></div>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="24">
            <div class="flex justify-center">
              <a-button type="primary" class="mr10" :loading="addLoading" @click="handleSubmit"><template
                  #icon><PlusOutlined/></template>保存</a-button>
              <a-button type="primary" danger @click="handleClose">取消</a-button>
            </div>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
<script setup>
const open = ref(false);
const addLoading = ref(false)
const formRef = ref({})
const emits = defineEmits(["success"])
const formState = ref({
  chuanYuanId:"",
  chuanYuanName:"",
  genZongRiQi:null,
  chuLiRiQi:null,
  neiRong:"",
  zhuangTai:1,
});
const tagsData = reactive(['月份回船', '待派', '考证中','家中有事', '暂不上船', '见习完成','考核不合格', '不续聘', '已上船']);

const handleAddDay = (day,flag) => {
  var d = new Date()
  if(flag == 'd') {
    d.setDate(d.getDate() + day)
  }else{
    d.setMonth(d.getMonth() + day)
  }
  formState.value.chuLiRiQi = d.Format("yyyy-MM-dd")
}
const handleChange = (tag, checked) => {
  formState.value.neiRong = tag
};

// 验证规则
const rules = {
  account: [ {required: true, message: '请输入账号', trigger: 'blur'}],
  username: [ {required: true, message: '请输入昵称', trigger: 'blur'}],
}

const handleSubmit = async () => {
  try {
    addLoading.value = true
    if(!formState.value.genZongRiQi){
      useMessage().error("请输入跟踪记录日期！")
      addLoading.value = false
      return;
    }
    /*if(!formState.value.chuLiRiQi){
      useMessage().error("请输入下次处理日期！")
      addLoading.value = false
      return;
    }*/
    /*if(!formState.value.neiRong){
      useMessage().error("请输入记录内容！")
      addLoading.value = false
      return;
    }*/

    await useSaveUpdateChuanYuanKuDongTaiApi(formState.value)
    addLoading.value = false
    useMessage().success("操作成功")
    handleClose()
    emits("success")
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleOpen = async (cid,cname) => {
  open.value = true
  formState.value.chuanYuanId = cid
  formState.value.chuanYuanName = cname
}


const handleClose = () => {
  open.value = false
  formState.value = {
    id:"",
    chuanYuanId:"",
    chuanYuanName:"",
    genZongRiQi:null,
    chuLiRiQi:null,
    neiRong:"",
    zhuangTai:1,
  }
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>
